

<div class="layui-fluid">
    <div class="layui-card" style="box-shadow:none;">
        <div class="layui-card-body" style="padding-top: 40px;">
            <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
                <div carousel-item>
                    <div>
                        <form class="layui-form" lay-filter="layuiadmin-form-addcertmanage-adddomainname" style="margin: 0 auto;max-width: 560px;padding-top: 40px;">
                            <div class="layui-form-item">
                                <label class="layui-form-label">域名类型:</label>
                                <div class="layui-input-block">
                                    <select name="domainNameType" lay-filter="select-filter-addcertmanage-domainnametype" lay-verify="required">
                                        <option value="">请选择</option>
                                        <option value="1">单域名</option>
                                        <option value="3">泛域名</option>
                                    </select>
                                    <input type="hidden" name="domainNameTypeStr" value="" />
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">域名:</label>
                                <div class="layui-input-block">
                                    <input type="text" name="domainName" placeholder="请填写域名" class="layui-input" lay-verify="required" lay-affix="clear" />
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="formStep" style="float:right;">
                                        &emsp;下一步&emsp;
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div>
                        <form class="layui-form" lay-filter="layuiadmin-form-addcertmanage-verifydomainname" style="margin: 0 auto;max-width: 560px;padding-top: 40px;">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">DNS服务商:</label>
                                    <div class="layui-input-inline layui-input-wrap">
                                        <select name="dnsProviderType" lay-filter="select-filter-addcertmanage-dnsprovidertype" lay-verify="required">
                                            <option value="">请选择</option>
                                            <option value="1">阿里云</option>
                                            <option value="2">腾讯云</option>
                                            <option value="3">华为云</option>
                                        </select>
                                        <input type="hidden" name="dnsProviderTypeStr" value="" />
                                    </div>
                                    <div class="layui-form-mid layui-input-wrap freecert-cert-add" style="padding: 0!important;">
                                        <span>没有我要的DNS服务商?</span>
                                        <a href="https://support.qq.com/product/653828" target="_blank">我要提需求</a>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">选择已有DNS授权:</label>
                                <div class="layui-input-block">
                                    <select name="dnsAuth" id="select-addcertmanage-dnsauth" lay-filter="select-filter-addcertmanage-dnsauth" lay-verify="required">
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">AccessKey ID:</label>
                                <div class="layui-input-block">
                                    <input type="text" name="accessKeyID" placeholder="" class="layui-input" lay-verify="" disabled />
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">AccessKey Secret:</label>
                                <div class="layui-input-block">
                                    <input type="text" name="accessKeySecret" placeholder="" class="layui-input" lay-verify="" disabled />
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                                    <button class="layui-btn" lay-submit lay-filter="formStep2" style="float:right;">
                                        &emsp;下一步&emsp;
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div>
                        <form class="layui-form" lay-filter="layuiadmin-form-addcertmanage-applycert" style="margin: 0 auto;max-width: 560px;padding-top: 40px;">
                            <div class="layui-form-item">
                                <label class="layui-form-label">域名类型:</label>
                                <div class="layui-input-block">
                                    <label id="span-applycert-domainnametype" class="layui-form-label" style="text-align:left;"></label>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">域名:</label>
                                <div class="layui-input-block">
                                    <label id="span-applycert-domainname" class="layui-form-label" style="text-align:left;"></label>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">DNS服务商:</label>
                                <div class="layui-input-block">
                                    <label id="span-applycert-dnsprovidertype" class="layui-form-label" style="text-align:left;"></label>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">DNS授权:</label>
                                <div class="layui-input-block">
                                    <label id="span-applycert-dnsauth" class="layui-form-label" style="text-align:left;width:300px;"></label>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">AccessKey ID:</label>
                                <div class="layui-input-block">
                                    <label id="span-applycert-accesskeyid" class="layui-form-label" style="text-align: left; width: 300px;"></label>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">AccessKey Secret:</label>
                                <div class="layui-input-block">
                                    <label id="span-applycert-accesskeysecret" class="layui-form-label" style="text-align: left; width: 300px;"></label>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                                    <button class="layui-btn" lay-submit lay-filter="LAY-cert-applycert-front-submit" style="float:right;">
                                        &emsp;确定&emsp;
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['admin', 'form', 'step', 'dropdown'], function(){
      var $ = layui.$
          , form = layui.form
          , setter = layui.setter
          , dropdown = layui.dropdown
            , step = layui.step;
        var layer = layui.layer;
        var util = layui.util;

      step.render({
          elem: '#stepForm',
          filter: 'stepForm',
          width: '100%', //设置容器宽度
          stepWidth: '700px',
          height: '600px',
          stepItems: [{
              title: '填写域名'
          }, {
              title: '选择DNS授权'
          }, {
              title: '核对信息'
          }]
      });

    var userDnsAuthData = [];
    form.on('submit(formStep)', function (data) {
        console.log(data);

        //参数校验
        var domainName = data.field.domainName;
        var domainNameType = data.field.domainNameType;
        var singleDomainPattern = /^[a-zA-Z][a-zA-Z0-9-.]*$/;
        var wildcardDomainPattern = /^\*\.[a-zA-Z0-9-.]*(.*[a-zA-Z0-9-].*)*$/;
        if (domainNameType == '1') {
            //单域名，不能以*.开头，test.freecert.cn
            var isValidSingleDomain = singleDomainPattern.test(domainName); // 返回 true 或 false
            if (!isValidSingleDomain) {
                layer.msg('不是合法的单域名，请检查后重试！');
                return false;
            }
        }
        else if (domainNameType == '3') {
            //泛域名，必须以*.开头
            var isValidWildcardDomain = wildcardDomainPattern.test(domainName);
            if (!isValidWildcardDomain) {
                layer.msg('不是合法的泛域名，泛域名必须以*.开头！');
                return false;
            }
        }

        step.next('#stepForm');

        //获取用户的DNS授权
        $.ajax({
            url: setter.baseConfig.apiHost + '/api/dnsauth/getpagingdnsauths'
            , type: 'post'
            , contentType: "application/json"
            , data: JSON.stringify({ page: 1, limit: 10})
            , beforeSend: function (xhr) {
                xhr.setRequestHeader("Authorization", 'Bearer ' + layui.data(setter.tableName)[setter.request.tokenName]);
            }
            , success: function (res) {
                if (res.errorCode != '00000') {
                    console.log(res.errorMessage);
                    return false;
                }

                for (var i = 0; i < res.data.entities.length; i++) {
                    var item = res.data.entities[i];
                    var obj = new Object();
                    obj.dnsProviderType = item.dnsProviderType;
                    obj.dnsAuthId = item.dnsAuthId;
                    obj.dnsAuthName = item.dnsAuthName;
                    obj.accessKeyID = item.accessKeyID;
                    obj.accessKeySecret = item.accessKeySecret;
                    obj.dnsProviderTypeStr = item.dnsProviderTypeStr;
                    obj.id = item.id;

                    userDnsAuthData.push(obj);
                }
            }
        });

        return false;
      });

      form.on('submit(formStep2)', function (data) {
          step.next('#stepForm');

          //申请证书页面初始化
          var formAddCertManageData = form.val('layuiadmin-form-addcertmanage-adddomainname');
          $('#span-applycert-domainnametype').text(formAddCertManageData.domainNameTypeStr);
          $('#span-applycert-domainname').text(formAddCertManageData.domainName);

          var formVerifyDomainNameData = form.val('layuiadmin-form-addcertmanage-verifydomainname');
          $('#span-applycert-dnsprovidertype').text(formVerifyDomainNameData.dnsProviderTypeStr);
          $('#span-applycert-dnsauth').text(formVerifyDomainNameData.dnsAuth);
          $('#span-applycert-accesskeyid').text(formVerifyDomainNameData.accessKeyID);
          $('#span-applycert-accesskeysecret').text(formVerifyDomainNameData.accessKeySecret);

          return false;
      });

      $('.pre').click(function () {
          step.pre('#stepForm');
      });

      $('.next').click(function () {
          step.next('#stepForm');
      });

        // select 事件
        form.on('select(select-filter-addcertmanage-domainnametype)', function (data) {
            var elem = data.elem; // 获得 select 原始 DOM 对象
            var value = data.value; // 获得被选中的值
            var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象

            //layer.msg(this.innerHTML + ' 的 value: ' + value); // this 为当前选中 <option> 元素对象
            if (value == 1) {
                $("input[name='domainName']").attr("placeholder", "请输入单域名，不能以*.开头");
            }
            else if (value == 3) {
                $("input[name='domainName']").attr("placeholder", "请输入泛域名，必须以*.开头");
            }
            else {
                $("input[name='domainName']").attr("placeholder", "请输入域名");
            }

            var domainNameTypeStr = this.innerHTML;
            $('input:hidden[name="domainNameTypeStr"]').val(domainNameTypeStr);
        });

        // select 事件 选择DNS服务商
        var emptyOption = {
            dnsProviderType: "",
            dnsAuthId: "",
            dnsAuthName: "请选择已有DNS授权"
        };
        form.on('select(select-filter-addcertmanage-dnsprovidertype)', function (data) {
            var elem = data.elem; // 获得 select 原始 DOM 对象
            var value = data.value; // 获得被选中的值
            var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象

            //layer.msg(this.innerHTML + ' 的 value: ' + value); // this 为当前选中 <option> 元素对象
            var dnsProviderTypeStr = this.innerHTML;
            $('input:hidden[name="dnsProviderTypeStr"]').val(dnsProviderTypeStr);

            //清理数据
            $('#select-addcertmanage-dnsauth').empty();
            $('input[name="accessKeyID"]').val('');
            $('input[name="accessKeySecret"]').val('');

            if (value == 1) {//阿里云
                var aliDnsAuthArr = userDnsAuthData.filter(item => { return item.dnsProviderType == 1 });
                console.log(aliDnsAuthArr);

                if (aliDnsAuthArr.length == 0) {
                    form.render(null, 'layuiadmin-form-addcertmanage-verifydomainname');
                    return;
                }
                aliDnsAuthArr.unshift(emptyOption)
                for (var i = 0; i < aliDnsAuthArr.length; i++) {
                    var item = aliDnsAuthArr[i];
                    $('#select-addcertmanage-dnsauth').append(`<option value=${item.dnsAuthId}>${item.dnsAuthName}</option>`);
                }
            }
            else if (value == 2) {//腾讯云
                var tencentDnsAuthArr = userDnsAuthData.filter(item => { return item.dnsProviderType == 2 });
                console.log(tencentDnsAuthArr);

                if (tencentDnsAuthArr.length == 0) {
                    form.render(null, 'layuiadmin-form-addcertmanage-verifydomainname');
                    return;
                }
                tencentDnsAuthArr.unshift(emptyOption)
                for (var i = 0; i < tencentDnsAuthArr.length; i++) {
                    var item = tencentDnsAuthArr[i];
                    $('#select-addcertmanage-dnsauth').append(`<option value=${item.dnsAuthId}>${item.dnsAuthName}</option>`);
                }
            }
            else if (value == 3) {//华为云
                var huaWeiDnsAuthArr = userDnsAuthData.filter(item => { return item.dnsProviderType == 3 });
                console.log(huaWeiDnsAuthArr);

                if (huaWeiDnsAuthArr.length == 0) {
                    form.render(null, 'layuiadmin-form-addcertmanage-verifydomainname');
                    return;
                }
                huaWeiDnsAuthArr.unshift(emptyOption)
                for (var i = 0; i < huaWeiDnsAuthArr.length; i++) {
                    var item = huaWeiDnsAuthArr[i];
                    $('#select-addcertmanage-dnsauth').append(`<option value=${item.dnsAuthId}>${item.dnsAuthName}</option>`);
                }
            }
            form.render(null, 'layuiadmin-form-addcertmanage-verifydomainname');
        });

        //选择DNS授权
        form.on('select(select-filter-addcertmanage-dnsauth)', function (data) {
            var elem = data.elem; // 获得 select 原始 DOM 对象
            var value = data.value; // 获得被选中的值
            var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象

            //layer.msg(this.innerHTML + ' 的 value: ' + value); // this 为当前选中 <option> 元素对象
            if (value== '') {
                $('input[name="accessKeyID"]').val('');
                $('input[name="accessKeySecret"]').val('');
            }
            else {
                var userDnsAuth = userDnsAuthData.filter(item => { return item.dnsAuthId == value });
                $('input[name="accessKeyID"]').val(userDnsAuth[0].accessKeyID);
                $('input[name="accessKeySecret"]').val(userDnsAuth[0].accessKeySecret);
            }
        });
})
</script>